<template>
    <div class="news">
        <div>
            <div class="news-top">
                <img :src="topImage" alt="" width="100%">
            </div>
        </div>
        <div class="newsContent">
            <div class="news-title">
                公司新闻
            </div>
        </div>
        <div class="nei_right">
            <li v-for="(item, index) in details" :key="index">
                <div class="neinews_two_box">
                    <a href="#">
                        <div class="neinews_two">
                            <ul class="neinews_tow_left">
                                <img :src="item.image" alt="">
                                <ul class="neinews_two_left_time">{{item.date}}</ul>
                            </ul>
                            <ul class="neinews_two_center">
                                <li class="neinews_two_center_title">{{item.title}}</li>
                                <li class="neinews_two_center_con">{{item.content}}</li>
                            </ul>
                        </div>
                    </a>
                </div>
            </li>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            topImage: require('../assets/show.jpg'),
            details: [
                {
                    date : '2021.4.24',
                    image : require('../assets/16.jpg'),
                    title : '2021年，先生等一行指导酒文化广场建设',
                    content  : '邹祖贵先生、郭五林先生、龚平先生、张立华先生、邓真远先生、邓英先生在广场留影'
                },{
                    date : '2021.4.23',
                    image : require('../assets/17.jpg'),
                    title : 'xxx先生在《中国酒文化研究》发表文章',
                    content  : 'xxx先生在《中国酒文化研究》发表文章,介绍了中国的酒文化.'
                },{
                    date : '2021.4.22',
                    image : require('../assets/18.jpg'),
                    title : '白酒是中国酒类（除了果酒、米酒外）的统称',
                    content  : '中国白酒具有以酯类为主体的复合香味，以曲类、酒母为糖化发酵剂，利用淀粉质（糖质）原料，经蒸煮、糖化、发酵、蒸馏、陈酿和勾兑而酿制而成的各类酒。'
                },{
                    date : '2021.4.21',
                    image : require('../assets/19.jpg'),
                    title : '白酒的历史',
                    content  : '公元前4000－2000年，即由新石器时代的仰韶文化早期到夏朝初年，为头一个段落。这个段落，经历了漫长的2000年，是我国传统酒的启蒙期。用发酵的谷物来泡制水酒是当时酿酒的主要形式。这个时期是原始社会的晚期，先民们无不把酒看作是一种含有极大魔力的饮料。公元前2000年的夏王朝到公元前200年的秦王朝，历时1800年，这一段落为我国传统酒的成长期。在这个时期，由于有了火，出现了五谷六畜，加之酒曲的发明，使我国成为世界上最早用曲酿酒的国家。'
                },{
                    date : '2021.4.20',
                    image : require('../assets/20.jpg'),
                    title : '贵州茅台',
                    content  : '贵州茅台酒历史悠久、源远流长，具有深厚的文化内涵.'
                }
            ]

        }
    },
}
</script>
<style>
    .news {
        margin: 0;
        padding: 0;
        max-width: 100%;
        box-sizing: border-box;
    }
    .news-top {
        margin: 0;
        border: none;
    }
    .newsContent {
        width: 100%;
        height: auto;
        height: 80px;
        line-height: 80px;
        background: linear-gradient(-135deg, rgba(255, 93, 177, 0.9) 0%, rgba(0, 87, 137, 0.7) 100%);
    }
    .news-title {
        float: left;
        padding-left: 15%;
        font-size: 2.5rem;
        font-weight: 600;
    }
    .nei_right {
        width: 100%;
        height: auto;
        overflow: hidden;
        margin: 20px auto;
    }
    .neinews_two_box {
        width: 100%;
        height: 260px;
        padding-left: 10%;
        overflow: hidden;
        border-bottom: 1px solid #dadada;
        margin: 0 auto;
    }
    .neinews_two {
        width: 100%;
        height: 250px;
        overflow: hidden;
        padding: 40px 0;
        margin: 0 auto;
    }
    .neinews_tow_left {
        width: 300px;
        height: 180px;
        overflow: hidden;
        float: left;
        margin-right: 35px;
        position: relative;
        z-index: 1;
    }
    /* 图片 */
    .neinews_tow_left img {
        width: 300px;
        height: 180px;
        cursor: pointer;
        transform: scale(1);
        transition: transform .5s;
    }
    .neinews_tow_left:hover img {
        transform: scale(1.2);
        -webkit-transform: scale(1.1);
    }
    /* 日期 */
    .neinews_two_left_time {
        width: 90px;
        height: 30px;
        overflow: hidden;
        line-height: 30px;
        color: #fff;
        font-size: 14px;
        font-family: "Arial";
        background-color: #ae1d22;
        text-align: center;
        /* 字体加粗 */
        font-weight: bold;  
        position: absolute;
        z-index: 10;
        right: 0;
        margin: 70px auto;
    }
    .neinews_two_center {
        width: 70%;
        height: auto;
        float: left;
        overflow: hidden;
        margin: 0 auto;
        padding-left: 30px;
    }
    /* 内容标题 */
    .neinews_two_center_title {
        width: 100%;
        height: 60px;
        overflow: hidden;
        line-height: 60px;
        color: #333;
        /* 左对齐 */
        text-align: left;
        font-size: 3rem;
        font-family: "microsoft yahei";
        font-weight: bold;
    }
    /* 内容 */
    .neinews_two_center_con {
        width: 100%;
        height: 60px;
        overflow: hidden;
        line-height: 30px;
        color: #666;
        text-align: left;
        font-size: 2rem;
        font-family: "microsoft yahei";
        margin-top: 25px;
    }

    /* 窗口小于1800px */
    @media only screen and (max-width: 1800px) {
        
        .news-title {
            float: left;
            padding-left: 20%;
            font-size: 2rem;
            font-weight: 600;
        }
        .nei_right {
            box-sizing: border-box;
            width: 100%;
            height: auto;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }
        .neinews_two_box {
            margin: 0;
            padding: 0;
            width: 100%;
            height: auto;
            margin: 0;
        }
        .neinews_two {
            width: 70%;
            height: 250px;
            overflow: hidden;
            padding: 40px 0;
            margin: 0 auto;
        }
        .neinews_tow_left {
            margin: 0;
            width: 250px;
            height: auto;
            overflow: hidden;
            float: left;
            position: relative;
            z-index: 1;
        }
        /* 图片 */
        .neinews_tow_left img {
            width: 100%;
            height: auto;
            cursor: pointer;
            transform: scale(1);
            transition: transform .5s;
        }
        .neinews_tow_left:hover img {
            transform: scale(1.2);
            -webkit-transform: scale(1.1);
        }
        /* 日期 */
        .neinews_two_left_time {
            width: 90px;
            height: 30px;
            overflow: hidden;
            line-height: 30px;
            color: #fff;
            font-size: 14px;
            font-family: "Arial";
            background-color: #ae1d22;
            text-align: center;
            /* 字体加粗 */
            font-weight: bold;  
            position: absolute;
            z-index: 10;
            right: 0;
            margin: 70px auto;
        }
        .neinews_two_center {
            width: 70%;
            height: auto;
            float: left;
            overflow: hidden;
            margin: 0 auto;
            padding-left: 50px;
        }
        /* 内容标题 */
        .neinews_two_center_title {
            font-size: 2.5rem;
        }
        /* 内容 */
        .neinews_two_center_con {
            font-size: 1.8rem;
        }
    }
    /* 窗口小于1024px */
    @media only screen and (max-width: 1024px) {
        .news-title {
            float: left;
            padding-left: 10%;
            font-size: 2rem;
            font-weight: 600;
        }
        .nei_right {
            box-sizing: border-box;
            width: 100%;
            height: auto;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }
        .neinews_two_box {
            margin: 0;
            padding: 0;
            width: 100%;
            height: auto;
            margin: 0;
        }
        .neinews_two {
            width: 100%;
            height: auto;
            overflow: hidden;
            padding: 40px;
            margin: 0 auto;
        }
        .neinews_tow_left {
            margin: 0;
            width: 250px;
            height: auto;
            overflow: hidden;
            float: left;
            position: relative;
            z-index: 1;
        }
        /* 图片 */
        .neinews_tow_left img {
            width: 100%;
            height: auto;
            cursor: pointer;
            transform: scale(1);
            transition: transform .5s;
        }
        .neinews_tow_left:hover img {
            transform: scale(1.2);
            -webkit-transform: scale(1.1);
        }
        /* 日期 */
        .neinews_two_left_time {
            width: 90px;
            height: 30px;
            overflow: hidden;
            line-height: 30px;
            color: #fff;
            font-size: 14px;
            font-family: "Arial";
            background-color: #ae1d22;
            text-align: center;
            /* 字体加粗 */
            font-weight: bold;  
            position: absolute;
            z-index: 10;
            right: 0;
            margin: 70px auto;
        }
        .neinews_two_center {
            width: 70%;
            height: auto;
            float: left;
            overflow: hidden;
            margin: 0 auto;
            padding-left: 50px;
        }
        /* 内容标题 */
        .neinews_two_center_title {
            font-size: 2.5rem;
        }
        /* 内容 */
        .neinews_two_center_con {
            font-size: 1.8rem;
        }
    }
    /* 窗口小于768px */
    @media only screen and (max-width: 768px) {
        .news-title {
            float: left;
            padding-left: 10%;
            font-size: 2rem;
            font-weight: 600;
        }
        .nei_right {
            box-sizing: border-box;
            width: 100%;
            height: auto;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }
        .neinews_two_box {
            margin: 0;
            padding: 0;
            width: 100%;
            height: auto;
            margin: 0;
        }
        .neinews_two {
            width: 100%;
            height: auto;
            overflow: hidden;
            padding: 10px;
            margin: 0 auto;
        }
        .neinews_two_center {
            width: 60%;
            padding-left: 50px;
        }
        /* 内容标题 */
        .neinews_two_center_title {
            font-size: 2.5rem;
        }
        /* 内容 */
        .neinews_two_center_con {
            font-size: 1.8rem;
        }
    }
    /* 窗口小于480 */
    @media only screen and (max-width: 480px) {
        .news-top {
            width: 100%;
            height: 100px;
        }
        .newsContent {
            width: 100%;
            height: auto;
            height: 50px;
            line-height: 50px;
        }
        .news-top img {
            width: 100%;
            height: 100%;
        }
        .news-title {
            float: left;
            margin: 0;
            padding-left: 10px;
            font-size: 1.5rem;
            font-weight: 600;
        }
        .nei_right {
            box-sizing: border-box;
            width: 100%;
            height: auto;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }
        .neinews_two_box {
            margin: 0;
            padding: 0;
            width: 100%;
            height: auto;
            margin: 0;
        }
        .neinews_two {
            margin: 0;
            padding: 0;
            width: 100%;
            height: auto;
            overflow: hidden;
        }
        .neinews_tow_left {
            margin: 0;
            width: 100%;
            padding: 10px;
            height: auto;
            overflow: hidden;
            float: left;
            position: relative;
            z-index: 1;
        }
        /* 图片 */
        .neinews_tow_left img {
            width: 100%;
            height: auto;
            cursor: pointer;
            transform: scale(1);
            transition: transform .5s;
        }
        .neinews_tow_left:hover img {
            transform: scale(1.2);
            -webkit-transform: scale(1.1);
        }
        .neinews_two_center {
            margin: 0;
            padding: 20px;
            width: 100%;
            height: auto;
            float: left;
            overflow: hidden;
            margin: 0 auto;
        }
        /* 内容标题 */
        .neinews_two_center_title {
            font-size: 1.5rem;
        }
        /* 内容 */
        .neinews_two_center_con {
            font-size: 1rem;
            margin: 0;
            padding: 0;
        }
    }
</style>